<template>
  <div>
    <!-- <TreeSelect
      v-model:value="value"
      show-search
      :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
      placeholder="请选择数据选项"
      tree-default-expand-all
      :tree-data="data"
      :fieldNames="fieldNames"
      style="width: 100%"
    /> -->
    <a-select
      v-model:value="value"
      show-search
      :disabled="disabled"
      :placeholder="t('请选择数据选项')"
      :options="data"
      :filter-option="false"
      :fieldNames="fieldNames"
      style="width: 100%"
      @search="handleSearch"
    />
  </div>
</template>
<script lang="ts" setup>
  import { onMounted, ref, unref, watch } from 'vue';
  import { getDicItemList } from '/@/api/system/dic';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { cloneDeep } from 'lodash-es';
  const { t } = useI18n();
  const emit = defineEmits(['update:value', 'change']);

  const props = defineProps({
    value: String,
    disabled: { type: Boolean, default: () => false },
  });

  const value = ref(props.value);

  const data = ref<Recordable[]>([]);
  const options = ref<Recordable[]>([]);
  const fieldNames = ref({
    label: 'name',
    value: 'id',
  });

  onMounted(() => {
    fetch();
  });

  watch(
    () => value,
    () => {
      emit('update:value', unref(value)?.toString());
      emit('change', unref(value)?.toString());
    },
    { deep: true },
  );

  async function fetch() {
    data.value = await getDicItemList();
    options.value = cloneDeep(data.value);
    // data.value.map((item) => {
    //   item.disabled = true;
    //   item.value = item.id; //避免数字字典项没有value导致treeselect组件报错
    // });

    value.value = props.value;
  }

  function handleSearch(val) {
    data.value = options.value.filter((item) => {
      return item.name.includes(val);
    });
  }
</script>
